<!--
 * @Author: jiangyg email@jiangyg.com
 * @Date: 2022-11-10 21:02:30
 * @LastEditors: jiangyg email@jiangyg.com
 * @LastEditTime: 2022-11-24 06:32:10
 * @FilePath: /frontend/mall-frontend/src/views/modules/admin/main-sub-menu.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-sub-menu v-if="menu.children && menu.children.length >= 1" :index="menu.id">
    <template #title>
      <icon-svg v-if="menu.attributes && menu.attributes.icon != undefined" :name="menu.attributes.icon" />
      <span>{{ menu.name }}</span>
    </template>
    <main-sub-menu v-for="item in menu.children" :key="item.id" :menu="item" />
  </el-sub-menu>
  <el-menu-item v-else :index="menu.id" @click="gotoRouteHandle(menu)">
    <icon-svg v-if="menu.attributes && menu.attributes.icon != undefined" :name="menu.attributes.icon" />
    <span>{{ menu.name }}</span>
  </el-menu-item>
</template>

<script lang="ts" setup>
import admin from "@/utils/admin";
import { useRouter } from "vue-router";
import { computed, defineProps } from "vue";

import MainSubMenu from "@/views/modules/admin/main-sub-menu.vue";

const router = useRouter();

// 属性定义
const props = defineProps({
  menu: {
    type: Object,
    required: true,
  },
});

// 跳转路由
const gotoRouteHandle = (menu) => {
  let dynamicRouteList = admin.dynamicRouteList();
  var route = dynamicRouteList.filter((item) => item.meta.id === menu.id);
  if (route.length >= 1) {
    router.push({ name: route[0].name });
  }
};
</script>

<style lang="scss">
</style>